 <template>
  <el-container direction="vertical">

    <navMenu width="100%"></navMenu>

    <el-container direction="horizontal">
      <el-aside width="280px" height="100%">
        <sideBar class="menu" page-index="1-2" open-index="1"></sideBar>
      </el-aside>
      <el-main>
        <!--        <p>this is subcom page</p>-->
        <!--搜索栏-->
        <el-container direction="horizontal">
          <el-input v-model="words.word" placeholder="请输入部门名字 （支持模糊查询）"></el-input>
          <el-button style="margin-left: 16px" @click="vague()">搜索</el-button>
          <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">添加</el-button>
          <el-drawer
            title="新增部门"
            :visible.sync="drawer"
            :direction="direction"
            ref="thisdrawer">

            <el-row :gutter="20">
              <el-col :span="6" :offset="2">部门编号</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 8px">
              <el-col :span="20" :offset="2">
                <el-input v-model="newdpmtinfo.dpmt_id" placeholder="请输入部门编号" clearable size="small"></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 16px">
              <el-col :span="6" :offset="2">部门名称</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 8px">
              <el-col :span="20" :offset="2">
                <el-input v-model="newdpmtinfo.dpmt_name" placeholder="请输入部门名称" clearable size="small"></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 16px">
              <el-col :span="6" :offset="2">部门工作</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 8px">
              <el-col :span="20" :offset="2">
                <el-input v-model="newdpmtinfo.dpmt_job" placeholder="请输入部门工作" clearable size="small"></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 16px">
              <el-col :span="6" :offset="2">工作类型</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 8px">
              <el-col :span="20" :offset="2">
                <el-input v-model="newdpmtinfo.job_type" placeholder="请输入部门工作类型" clearable size="small"></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 16px">
              <el-col :span="6" :offset="2">工作描述</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 8px">
              <el-col :span="20" :offset="2">
                <el-input v-model="newdpmtinfo.job_desc" placeholder="请输入部门工作描述" clearable size="small"></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 16px">
              <el-col :span="10" :offset="2">直属公司或部门</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 8px">
              <el-col :span="20" :offset="2">
                <template>
                  <el-select v-model="newdpmtinfo.attr_com" clearable placeholder="请选择" size="small">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 30px">
              <el-col :span="10" :offset="6">
                <el-button @click="newdpmt()" type="primary" style="width: 130%">确认提交</el-button></el-col>
            </el-row>
          </el-drawer>
        </el-container>
        <!--部门列表-->
        <el-table
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          @selection-change="handleSelectionChange"
          height="502"
          style="width: 100%; margin-top: 16px"
          :row-class-name="getRowClass">

          <el-table-column type="expand" >
            <template slot-scope="scope">
            <el-table
                :data="scope.row.subdpmt"
                style="width: 100%"
                :show-header="false"
                size="small">
                <el-table-column
                  prop="dpmt_id"
                  width="100px">
                </el-table-column>
                <el-table-column
                  prop="dpmt_name">
                </el-table-column>
                <el-table-column
                  prop="dpmt_job">

                  <template slot-scope="scope">
                    {{scope.row.dpmt_job}}
                    <el-popover
                      placement="bottom"
                      title="工作内容"
                      width="200"
                      trigger="click">
                      <i class="el-icon-info" slot="reference"></i>
                      {{scope.row.job_desc}}
                    </el-popover>
                  </template>


                </el-table-column>
              <el-table-column
                prop="job_type">
              </el-table-column>
              <el-table-column
                prop="attr_com">
              </el-table-column>
              <el-table-column label="操作" width="100px">
                <template slot-scope="scope">

                  <el-button icon="el-icon-edit" circle size="mini"
                             @click="drawer2 = true,editdpmtinfo.dpmt_id=scope.row.dpmt_id,
                         editdpmtinfo.dpmt_name=scope.row.dpmt_name,
                         editdpmtinfo.dpmt_job=scope.row.dpmt_job
                         editdpmtinfo.job_type=scope.row.job_type
                         editdpmtinfo.job_desc=scope.row.job_desc
                         editdpmtinfo.attr_com=scope.row.attr_com"></el-button>
                  <el-drawer
                    title="修改部门"
                    :visible.sync="drawer2"
                    :direction="direction"
                    ref="thisdrawer2">

                    <el-row :gutter="20">
                      <el-col :span="10" :offset="2">部门编号:  {{editdpmtinfo.dpmt_id}}</el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 16px">
                      <el-col :span="6" :offset="2">部门名称</el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 8px">
                      <el-col :span="20" :offset="2">
                        <el-input v-model="editdpmtinfo.dpmt_name" placeholder="请输入部门名称" clearable size="small"></el-input>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 16px">
                      <el-col :span="6" :offset="2">部门工作</el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 8px">
                      <el-col :span="20" :offset="2">
                        <el-input v-model="editdpmtinfo.dpmt_job" placeholder="请输入部门工作" clearable size="small"></el-input>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 16px">
                      <el-col :span="6" :offset="2">工作类型</el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 8px">
                      <el-col :span="20" :offset="2">
                        <el-input v-model="editdpmtinfo.job_type" placeholder="请输入部门工作类型" clearable size="small"></el-input>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 16px">
                      <el-col :span="6" :offset="2">工作描述</el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 8px">
                      <el-col :span="20" :offset="2">
                        <el-input v-model="editdpmtinfo.job_desc" placeholder="请输入部门工作描述" clearable size="small"></el-input>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 16px">
                      <el-col :span="10" :offset="2">直属公司或部门</el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 8px">
                      <el-col :span="20" :offset="2">
                        <template>
                          <el-select v-model="editdpmtinfo.attr_com" clearable placeholder="请选择" size="small">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </template>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 30px">
                      <el-col :span="10" :offset="6">
                        <el-button @click="handleEdit()" type="primary" style="width: 130%">确认提交</el-button></el-col>
                    </el-row>
                  </el-drawer>
                  <el-button icon="el-icon-delete" circle size="mini"
                             @click="handleDelete(scope.$index, scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
            </template>
          </el-table-column>



          <el-table-column
            prop="dpmt_id"
            label="序号"
            width="100px">
          </el-table-column>

          <el-table-column
            prop="dpmt_name"
            label="部门名称" >
          </el-table-column>

          <el-table-column
            prop="dpmt_job"
            label="部门工作">
            <template slot-scope="scope">
              {{scope.row.dpmt_job}}
              <el-popover
                placement="bottom"
                title="工作内容"
                width="200"
                trigger="click">
                <i class="el-icon-info" slot="reference"></i>
                {{scope.row.job_desc}}
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="job_type"
            label="工作类型">
          </el-table-column>
          <el-table-column
            prop="attr_com"
            label="所属公司">
          </el-table-column>
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">

              <el-button icon="el-icon-edit" circle size="small"
                         @click="drawer2 = true,editdpmtinfo.dpmt_id=scope.row.dpmt_id,
                         editdpmtinfo.dpmt_name=scope.row.dpmt_name,
                         editdpmtinfo.dpmt_job=scope.row.dpmt_job
                         editdpmtinfo.job_type=scope.row.job_type
                         editdpmtinfo.job_desc=scope.row.job_desc
                         editdpmtinfo.attr_com=scope.row.attr_com"></el-button>
              <el-drawer
                title="修改部门"
                :visible.sync="drawer2"
                :direction="direction"
                ref="thisdrawer2">

                <el-row :gutter="20">
                  <el-col :span="10" :offset="2">部门编号:  {{editdpmtinfo.dpmt_id}}</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 16px">
                  <el-col :span="6" :offset="2">部门名称</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 8px">
                  <el-col :span="20" :offset="2">
                    <el-input v-model="editdpmtinfo.dpmt_name" placeholder="请输入部门名称" clearable size="small"></el-input>
                  </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 16px">
                  <el-col :span="6" :offset="2">部门工作</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 8px">
                  <el-col :span="20" :offset="2">
                    <el-input v-model="editdpmtinfo.dpmt_job" placeholder="请输入部门工作" clearable size="small"></el-input>
                  </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 16px">
                  <el-col :span="6" :offset="2">工作类型</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 8px">
                  <el-col :span="20" :offset="2">
                    <el-input v-model="editdpmtinfo.job_type" placeholder="请输入部门工作类型" clearable size="small"></el-input>
                  </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 16px">
                  <el-col :span="6" :offset="2">工作描述</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 8px">
                  <el-col :span="20" :offset="2">
                    <el-input v-model="editdpmtinfo.job_desc" placeholder="请输入部门工作描述" clearable size="small"></el-input>
                  </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 16px">
                  <el-col :span="10" :offset="2">直属公司或部门</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 8px">
                  <el-col :span="20" :offset="2">
                    <template>
                      <el-select v-model="editdpmtinfo.attr_com" clearable placeholder="请选择" size="small">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </template>
                  </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 30px">
                  <el-col :span="10" :offset="6">
                    <el-button @click="handleEdit()" type="primary" style="width: 130%">确认提交</el-button></el-col>
                </el-row>
              </el-drawer>
              <el-button icon="el-icon-delete" circle size="small"
                         @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
          </el-table-column>

        </el-table>
        <!--角标-->
        <div style="text-align: center;margin-top: 20px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="current_change">
          </el-pagination>
        </div>

      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import sideBar from "@/components/sideBar";
import navMenu from "@/components/navMenu";
export default {
  components: {sideBar, navMenu},
  data() {
    return {
      tableData: [],
      total: 0,
      pagesize: 8,
      currentPage: 1,
      st: 2,
      words: {
        word: ''
      },
      drawer: false,
      drawer2: false,
      direction: 'rtl',
      options: [{
        value: '高梁桥地铁集团',
        label: '高梁桥地铁集团'
      },],
      newdpmtinfo: {
        dpmt_id: '', dpmt_name: '',dpmt_job:'',
        job_type:'',job_desc:'',attr_com:''
      },
      editdpmtinfo: {
        dpmt_id: '', dpmt_name: '',dpmt_job:'',
        job_type:'',job_desc:'',attr_com:''
      }
    }
  },
  mounted() {
    this.$axios.get(`http://127.0.0.1:5000/dpmt/init`).then((res) => {
      console.log(res);
      this.tableData = res.data;
      this.total = this.tableData.length+3;
      console.log(res.data);
    });
    this.$axios.get(`http://127.0.0.1:5000/dpmt/options`).then((res) => {
      console.log(res);
      this.options = res.data;
      console.log(res.data);
    });
  },
  methods: {
    getRowClass(row) {
      if(row.row.subdpmt.length === 0){
        // promotionStudentVOSs是你子项的数组 key
        return 'row-expand-cover' }
    },
    current_change: function (currentPage) {
      this.currentPage = currentPage;
    }, async vague() {
      this.$axios.post(`http://127.0.0.1:5000/dpmt/select`, this.words).then((res) => {
        console.log(res);
        if(res.data==0){
          this.$message('没有符合查询条件的结果');
          // window.location.reload();
        }
        else {
          this.tableData = res.data;
          this.total = this.tableData.length+3;
        }
      });
    }, async handleDelete($index, row) {
      console.log(row.dpmt_id);
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          this.$axios.post(`http://127.0.0.1:5000/dpmt/delete`, row.dpmt_id).then((res) => {
          console.log(res);
          this.st = res.data;
          if (this.st==1){
            this.$message('删除成功');
            //window.location.reload();
            this.$axios.get(`http://127.0.0.1:5000/dpmt/init`).then((res) => {
              console.log(res);
              this.tableData = res.data;
              this.total = this.tableData.length+3;
              console.log(res.data);
            });
            this.$axios.get(`http://127.0.0.1:5000/dpmt/options`).then((res) => {
              console.log(res);
              this.options = res.data;
              console.log(res.data);
            });
          }
          else{
            this.$message('删除失败,请先将该部门下所有员工与工作移除！');
          }

          this.st = 2;
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async newdpmt() {
      if (this.newdpmtinfo.dpmt_id == '')
        this.$message('请输入部门编号');
      else if (this.newdpmtinfo.dpmt_name=='')
        this.$message('请输入部门名称');
      else if (this.newdpmtinfo.dpmt_job=='')
        this.$message('请输入部门工作');
      else if (this.newdpmtinfo.job_type=='')
        this.$message('请输入工作类型');
      else if (this.newdpmtinfo.job_desc=='')
        this.$message('请输入工作描述');
      else if (this.newdpmtinfo.attr_com=='')
        this.$message('请选择直属公司或部门');
      else
        this.$axios.post(`http://127.0.0.1:5000/dpmt/newdpmt`, this.newdpmtinfo).then((res) => {
          console.log(res);
          this.st = res.data;

          if (this.st==1) {
            this.$message('新增成功');
            this.$refs.thisdrawer.closeDrawer();
            //window.location.reload();
            this.$axios.get(`http://127.0.0.1:5000/dpmt/init`).then((res) => {
              console.log(res);
              this.tableData = res.data;
              this.total = this.tableData.length+3;
              console.log(res.data);
            });
            this.$axios.get(`http://127.0.0.1:5000/dpmt/options`).then((res) => {
              console.log(res);
              this.options = res.data;
              console.log(res.data);
            });
          }
          else {
            this.$message('新增失败，部门已存在！');
            this.$refs.thisdrawer.closeDrawer();
          }
          this.st=2;
        });
    },
    handleEdit() {
      if (this.editdpmtinfo.dpmt_id == '')
        this.$message('请输入部门编号');
      else if (this.editdpmtinfo.dpmt_name=='')
        this.$message('请输入部门名称');
      else if (this.editdpmtinfo.dpmt_job=='')
        this.$message('请输入部门工作');
      else if (this.editdpmtinfo.job_type=='')
        this.$message('请输入工作类型');
      else if (this.editdpmtinfo.job_desc=='')
        this.$message('请输入工作描述');
      else if (this.editdpmtinfo.attr_com=='')
        this.$message('请选择直属公司或部门');
      else
        this.$axios.post(`http://127.0.0.1:5000/dpmt/editdpmt`, this.editdpmtinfo).then((res) => {
          console.log(res);
          this.st = res.data;

          if (this.st==1) {
            this.$message('修改成功');
            this.$refs.thisdrawer2.closeDrawer();
            //window.location.reload();
            this.$axios.get(`http://127.0.0.1:5000/dpmt/init`).then((res) => {
              console.log(res);
              this.tableData = res.data;
              this.total = this.tableData.length+3;
              console.log(res.data);
            });
            this.$axios.get(`http://127.0.0.1:5000/dpmt/options`).then((res) => {
              console.log(res);
              this.options = res.data;
              console.log(res.data);
            });
          }
          else{
            this.$message('修改失败！');
            this.$refs.thisdrawer2.closeDrawer();
          }
          this.st.statu=2;
        });
    }
  }
}
</script>

<style>


.menu{
  width: 100%;
  float: left;
  height: 700px;
}

.row-expand-cover td .el-table__expand-icon{ visibility: hidden !important; }
</style>
